<template>
	<view class="bBtn_p_b140">
		<view class="contina w m_t_10">
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="80" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="证件照" prop="form.id_photo" borderBottom ref="item1">
						<view class="par_upload" @click="upImg('id_photo')">
							<image v-if="form.id_photo" :src="form.id_photo" style="width: 100rpx;height: 100rpx;">
							</image>
							<image v-else src="../../static/image/phone.png"></image>
						</view>
					</u-form-item>
					<u-form-item label="姓名" prop="form.name" borderBottom ref="item1">
						<u--input v-model="form.name" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入人才姓名"></u--input>
					</u-form-item>
					<u-form-item label="出生日期" prop="form.birthday" borderBottom @click="showDate(1) ">
						<u--input v-model="form.birthday" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择人才出生日期" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="性别" prop="form.gender" borderBottom @click="showAction(1); ">
						<u--input v-model="show_gender" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择性别" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="身份证号码" prop="form.id_no" borderBottom ref="item1">
						<u--input v-model="form.id_no" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入身份证号码"></u--input>
					</u-form-item>
					<u-form-item label="身份证正面" prop="form.id_photo_front" borderBottom ref="item1">
						<view class="par_upload" @click="upImg('id_photo_front')">
							<image v-if="form.id_photo_front" :src="form.id_photo_front"
								style="width: 100rpx;height: 100rpx;"></image>
							<image v-else src="../../static/image/phone.png"></image>
						</view>
					</u-form-item>
					<u-form-item label="身份证反面" prop="form.id_photo_back" borderBottom ref="item1">
						<view class="par_upload" @click="upImg('id_photo_back')">
							<image v-if="form.id_photo_back" :src="form.id_photo_back"
								style="width: 100rpx;height: 100rpx;"></image>
							<image v-else src="../../static/image/phone.png"></image>
						</view>
					</u-form-item>
					<u-form-item label="籍贯" prop="form.native_place" borderBottom @click="showArea(1)">
						<u--input v-model="form.native_place" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择籍贯" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="政治面貌" prop="form.politics" borderBottom @click="showAction(2)">
						<u--input v-model="form.politics" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择政治面貌" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="毕业院校" prop="form.school" borderBottom ref="item1">
						<u--input v-model="form.school" border="none"
							placeholder-style="text-align: right;color:#999999" inputAlign="right"
							placeholder="请输入毕业院校"></u--input>
					</u-form-item>
					<u-form-item label="所学专业" prop="form.major" borderBottom ref="item1">
						<u--input v-model="form.major" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入所学专业"></u--input>
					</u-form-item>
					<u-form-item label="现居地" prop="form.address" borderBottom @click="showArea(2)">
						<u--input v-model="form.address" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择现居地" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="联系电话" prop="form.phone" borderBottom ref="item1">
						<u--input v-model="form.phone" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入联系电话"></u--input>
					</u-form-item>
					<u-form-item label="电子邮箱" prop="form.email" borderBottom ref="item1">
						<u--input v-model="form.email" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入电子邮箱"></u--input>
					</u-form-item>
					<u-form-item label="所在公司" prop="form.corp_id" borderBottom ref="item1" @click="showAction(3)">
						<u--input v-model="form.corp.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择公司" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="入职时间" prop="form.join_at" borderBottom @click="showDate(2) ">
						<u--input v-model="form.join_at" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择入职时间" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="所在部门" prop="form.dept_id" borderBottom @click="showAction(4)">
						<u--input v-model="form.dept.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择所在部门" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="职位" prop="form.post_id" borderBottom @click="showAction(5)">
						<u--input v-model="form.post.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择职位" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom @click="toAdd">
			<template #btn>
				<view class="flex_a_c" style="justify-content: space-around;">
					<view class="cale btns" @click="back">取消</view>
					<view class="save btns" @click="submit">保存</view>
				</view>
			</template>
		</flooterCom>
		<u-datetime-picker :show="show" mode="date" v-model="datetime" @cancel="show=false"
			@confirm="show=false"></u-datetime-picker>
		<u-picker :show="show2" :columns="actions" @cancel="show2=false" @confirm="selectAction"
			keyName="name"></u-picker>
		<cc-selectDity :province="province" :city="city" :area="area" :show="show3" @sureSelectArea="onsetCity"
			@hideShow="show3=false" @changeClick="changeClick"></cc-selectDity>

	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	import dayjs from "dayjs"
	export default {
		data() {
			return {
				edit: 0,
				province: "北京",
				city: "北京市",
				area: "东城区",
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				show: false,
				show2: false,
				show3: false,
				datetime: '',
				actionType: 1,
				dateType: 1,
				show_gender: '',
				actions: [],
				op1: [{
						value: 1,
						name: '男',
					},
					{
						value: 0,
						name: '女',
					}
				],
				op2: [{
						name: '党员',
					},
					{
						name: '群众',
					}
				],
				op3: [],
				op4: [],
				op5: [],
				form: {
					id_photo: '',
					name: '',
					birthday: '',
					gender: '',
					id_no: '',
					id_photo_front: '',
					id_photo_back: '',
					native_place: '',
					politics: '',
					address: '',
					phone: '',
					email: '',
					corp_id: '',
					dept_id: '',
					post_id: '',
					job: '',
					full_job: '',
					school: '',
					major: '',
					join_at: '',
					corp: {
						name: ''
					},
					dept: {
						name: ''
					},
					post: {
						name: ''
					}
				}

			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			if (this.edit == 1) {
				this.getDetail(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '编辑人才' : '新增人才'
			})
		},
		created() {
			this.$api.homeApi.getCorpList().then(res => {
				this.op3 = res.list
			})
		},
		watch: {
			datetime(n, o) {
				let d = this.$dayjs(n ? n : o).format('YYYY-MM-DD');
				if (this.dateType == 1) {
					this.form.birthday = d
				}
				if (this.dateType == 2) {
					this.form.join_at = d
				}
				this.datetime = ''
			}
		},
		methods: {
			async getDetail(id) {
				this.form = await this.$api.staffApi.detail({
					id: id
				})
				if (this.form.gender === 0) {
					this.show_gender = '女';
				}
				if (this.form.gender === 1) {
					this.show_gender = '男';
				}
			},
			async selectAction(e) {
				let v = e.value[0]
				if (this.actionType == 1) {
					this.form.gender = v.value
					this.show_gender = v.name
				}
				if (this.actionType == 2) {
					this.form.politics = v.name
				}
				if (this.actionType == 3) {
					this.form.corp_id = v.id
					this.form.corp.name = v.name
					uni.showLoading({
						title: '部门/职位加载中...'
					})
					this.$api.homeApi.getDeptList({
						corp_id: v.id
					}).then(res => {
						this.op4 = res.list
					})
					let res = await this.$api.homeApi.getPostList({
						corp_id: v.id
					})
					this.op5 = res.list
					uni.hideLoading()
				}
				if (this.actionType == 4) {
					this.form.dept_id = v.id
					this.form.dept.name = v.name
				}
				if (this.actionType == 5) {
					this.form.post_id = v.id
					this.form.post.name = v.name
				}
				this.show2 = false
			},
			showAction(type) {
				this.actionType = type
				this.actions = [];
				if (type == 1) {
					this.actions.push(this.op1)
				}
				if (type == 2) {
					this.actions.push(this.op2)
				}
				if (type == 3) {
					this.actions.push(this.op3)
				}
				if (type == 4) {
					this.actions.push(this.op4)
				}
				if (type == 5) {
					this.actions.push(this.op5)
				}
				this.show2 = true
			},
			showDate(type) {
				this.dateType = type
				this.show = true
			},
			showArea(type) {
				this.areaType = type
				this.show3 = true
			},
			changeClick(value, value2, value3, code) {
				this.province = value;
				this.city = value2;
				this.area = value3;
			},
			onsetCity(e) {
				let data = e.detail.target.dataset;
				this.show3 = false
				if (this.areaType == 1) {
					this.form.native_place = data.province + data.city + data.area;
				}
				if (this.areaType == 2) {
					this.form.address = data.province + data.city + data.area;
				}
			},
			back() {
				uni.navigateBack()
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.staffApi.update(this.form)
					} else {
						await this.$api.staffApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			upImg(field) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$fun.uploadImage(tempFilePaths[0]).then(res => {
							this.form[field] = res.url
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.contina {
		::v-deep .u-form-item__body {
			padding: 30rpx 0 !important;

			.par_upload {
				width: 100rpx;
				height: 100rpx;
				background-color: #F4F5F7;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				margin-left: auto;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		::v-deep .u-form-item__body__left__content__label {
			justify-content: space-between !important;
			width: 100%;
		}
	}

	.btns {
		width: 330rpx;
		height: 90rpx;
		border-radius: 10px 10px 10px 10px;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px 10px 10px 10px;
	}

	.cale {
		color: #FF0000;
		border: 1px solid #F07878;
	}

	.save {
		color: #fff;
		background-color: #0074FF;
	}
</style>